<script>
// 引入 vue3 的响应式方法
import { ref } from 'vue'
// 引入自定义 Aside 侧边栏组件
import Aside from "./Aside.vue"
// 引入自定义 Header 顶部栏组件
import Header from "./Header.vue"
// 引入 Element Plus 的折叠/展开图标
import { Fold, Expand } from '@element-plus/icons-vue'

export default {
  name: "Index",
  // 注册子组件和图标组件
  components: { Aside, Header, Fold, Expand },
  setup() {
    // 侧边栏是否收起
    const isCollapse = ref(false)
    // 侧边栏宽度
    const aside_width = ref('200px')
    // 当前显示的图标
    const icon = ref(Fold)

    // 切换侧边栏收起/展开
    const doCollapse = () => {
      isCollapse.value = !isCollapse.value
      if (!isCollapse.value) { // 展开
        aside_width.value = '64px'
        icon.value = Fold
      } else { // 收起
        aside_width.value = '200px'
        icon.value = Expand
      }
    }

    return {
      isCollapse,
      aside_width,
      icon,
      doCollapse
    }
  }
}
</script>

<template>
  <!-- 主布局容器，包含侧边栏和主内容区 -->
  <el-container style="height: 100%; border: 1px solid #eee">
    <!-- 侧边栏区域 -->
    <el-aside :width="aside_width" style="height: 100vh;background-color: rgb(238, 241, 246);margin-left: -1px;">
      <Aside :isCollapse="isCollapse"></Aside>
    </el-aside>

    <!-- 主内容区域 -->
    <el-container style="height: 100%;">
      <!-- 顶部栏 -->
      <el-header
        style="text-align: right; font-size: 12px;height: 100%;border-bottom: rgba(168,168,168,0.3) 1px solid;">
        <Header @doCollapse="doCollapse" :icon="icon"></Header>
      </el-header>

      <!-- 路由视图区域 -->
      <el-main style="height: 100%;">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>


<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-main {
  padding: 5px;
}

.el-aside {
  color: #333;
}
</style>
